<template>
	<view class="bods">
		<Setps :num='2' :headtitle='headtitle' :tit='tit' />


		<view class="formcard">
			<view class="bodtitle">
				<p><b>费用预算</b></p>
			</view>
			<u-form labelPosition="left" :model="moneymodel" :rules="rules" ref="userform">
				<!-- 申请人 -->
				<u-form-item required labelWidth="170rpx" label="申请人" prop="userInfo.name" borderBottom ref="item1">
					<input class="pdlf" type="text" disabled v-model="moneymodel.userInfo.name">
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<!-- 申请金额 -->
				<u-form-item required labelWidth="200rpx" label="申请金额" prop="userInfo.money" borderBottom ref="item2">
					<input class="pdlf" type="number" v-model="moneymodel.userInfo.money" placeholder="请输入">
				</u-form-item>
				<view class="skyb">
					<label class="lab">QB12789654400</label>
					<view class="skyblu">
						<span>费用科室</span>
						<p>新车型推进器</p>
					</view>
					<view class="skyblu">
						<span>预算号名称</span>
						<p>共性费用-差旅费-国内</p>
					</view>
				</view>
			</u-form>
		</view>


		<view class="addbtn">
			<view style='width: 90%;margin: 0 auto;margin-bottom: 30rpx;'>
				<view class="update">
					<p>
						<image src="@/static/newimg/tJ.svg" mode=""></image>
						<span style='color: #007aff;padding-left: 10rpx;'>添加同行人费用</span>
					</p>
				</view>
			</view>
		</view>
		<view class="bottom_setup">
			<Nextbtn :backtitle='backtitle' :nexttitle='nexttitle' :next='next' />
		</view>
		
	</view>
</template>

<script>
	import Setps from '@/workspaces/tools/setps.vue'
	import Nextbtn from '@/workspaces/tools/nextbtn.vue'
	export default {
		data() {
			return {
				tit:[
					{name:'信息变更'},
					{name:'行程变更'},
					{name:'费用明细'},
					{name:'确认提交'},
				],
				moneymodel: {
					userInfo: {
						name: '张三',
						money:''
					}
				},
				headtitle: '出差申请',
				name: 2,
				rules: {
					// 姓名正则
					'userInfo.name': [{
							required: true,
							message: '请填订单号',
							trigger: ['blur', 'change']
						},
						{
							pattern: /[\u4e00-\u9fa5]/,
							message: '请输入正确的姓名'
						},
					],
					'userInfo.money': [{
							type:'number',
							required: true,
							message: '请填订单号',
							trigger: ['blur', 'change']
						}
					],
				},
				backtitle:'上一步(行程变更)',
				nexttitle:'下一步(信息确认)',
				next:'./submission'
			}
		},
		methods: {
			handback() {
				uni.navigateBack()
			},
			handsub() {
				this.$jump('./submission', 'navigate');
				this.$refs.userform.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		},
		components: {
			Setps,
			Nextbtn
		}
	}
</script>

<style scoped lang="scss">
	view{
		font-family: pf;
	}
	.pdlf {
			padding-left: 60rpx;
	}

	.skyb {
		width: 90%;
		margin: 20rpx auto;
		background: rgb(247, 251, 255);
		padding: 5rpx 10rpx;

		.lab {
			display: block;
			height: 80rpx;
			line-height: 80rpx;
			padding-left: 10rpx;
			border-bottom: 1px solid #f1f1f1;
		}
		.skyblu{
			display: flex;
			flex-direction: row;
			padding: 20rpx 20rpx;
			span{
				width: 200rpx;
			}
			p{
				margin-left: 30rpx;
			}
		}
	}

	.addbtn {
		width: 90%;
		background-color: white;
		margin: 0 auto;
		height: 100rpx;
		padding: 10rpx 0;
		box-sizing: border-box;

		.btn {
			width: 90%;
			margin: 0 auto;
		}
	}
	.update {
			width: 100%;
			height: 80rpx;
			border: 1px solid #007aff;
			border-radius: 4px;
			display: flex;
			align-items: center;
			justify-content: center;
			p {			
				image {
					width: 40rpx;
					height: 40rpx;
					vertical-align: bottom;
				}
			}
		}
	.bottom_setup {
		position: fixed;
		bottom: 30rpx;
		right: 0;
		width: 100%;
		height: 160rpx;
		background-color: white;
		margin-top: 40rpx;
		padding: 35rpx 0;
		box-sizing: border-box;
	}
</style>
